<template>
  <div class="shopInfoAlter">
      <div class="shopInfoAlter-con">
        <div class="shop-logo">
          <span>当前店铺Logo: </span><img src="@/assets/images/logo2.png" alt="">
          <el-upload
            class="upload-logo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传新的Logo</el-button>
          </el-upload>
        </div>
        <div class="run-time">
          营业时间:
          <el-time-select
            v-model="startTime"
            :picker-options="{
            start: '06:00',
            step: '00:30',
            end: '24:00'
            }"
            placeholder="营业时间">
          </el-time-select>
          至
          <el-time-select
            v-model="endTime"
            :picker-options="{
            start: '06:00',
            step: '00:30',
            end: '24:00'
            }"
            placeholder="打烊时间">
          </el-time-select>
        </div>
        <div class="notice">
          营业公告:
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="填写你店铺的公告"
            v-model="noticeContent">
          </el-input>
        </div>
        <el-button class="change-btn" @click="doChangeInfo" type="primary" round>提交更改</el-button>
      </div>
  </div>
</template>

<script>
export default {
  name: 'ShopInfoAlter',
  data () {
    return {
      startTime: '',
      endTime: '',
      noticeContent: '',
      fileList: []
    }
  },
  methods: {
    doChangeInfo () {
      console.log(this.startTime, this.endTime, this.noticeContent)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../assets/css/base.styl"
  .shopInfoAlter
    width: $width
    margin: 0 auto
    padding-left: 170px
    box-sizing border-box
    background-color: #fff
    min-height 800px
    .shopInfoAlter-con
      padding-left 110px
      box-sizing: border-box
      >div
        padding: 20px 0 40px
      .shop-logo
        img
          width: 80px
          height: 80px
          margin-left 10px
          /*vertical-align middle*/
          position: relative
          top: 30px
        .upload-logo
          display inline-block
          margin-left 40px
      .notice
        .el-textarea
          width: 500px
          vertical-align middle
      .el-button
        margin 0 0 0 20px
      .change-btn
        margin-left 150px
</style>
